/**
 * @file 公共title
 * @author wl
 * @date 20200311
 */
import React, {useEffect, useState, useRef} from 'react';
import {Anchor, Button, Drawer, Tooltip} from 'antd';
import {
    UnorderedListOutlined
} from '@ant-design/icons';


import './index.less';

const {Link} = Anchor;


const commonAnchor = (Component, anchorConfig, getContainer) => props => {
    const [visible, setVisible] = useState(false);
    const [linkConfig, setLinkConfig] = useState([]);
    const domRef = useRef();

    const getLinkConfig = configArr => (
        configArr.map(item => {
            const {title, children} = item;

            if (children && children.length) {
                return getLinkConfig(children);
            }

            // 该id 默认是每个模块的 title
            return (
                <Link
                    key={title}
                    href={`#anchor${title}`}
                    title={title}
                />
            );
        })
    );

    const handleOpen = e => {
        // e.stopPropagation();
        // setVisible(true);
        domRef.current.style.width = '190px';
    };

    const handleClose = e => {
        // setVisible(false);
        domRef.current.style.width = 0;
    };

    useEffect(() => {
        const result = getLinkConfig(anchorConfig);
        setLinkConfig(result);
    }, [anchorConfig]);

    const fn = () => {
        console.log('close');
        // setVisible(false);
        handleClose();
    };

    useEffect(() => {
        document.body.addEventListener('click', fn);

        return () => {
            document.body.removeEventListener('click', fn);
        };
    }, []);


    return (
        <div>
            <Tooltip title="目录">
                <Button
                    className="anchor-btn"
                    icon={<UnorderedListOutlined />}
                    type="primary"
                    onClick={handleOpen}
                />
            </Tooltip>
            {/* <Drawer
                // title="目录"
                title={false}
                placement="right"
                closable={false}
                onClose={handleClose}
                visible={visible}
                mask={false}
                style={{
                    height: '274px',
                    top: '200px'
                }}
            >
                <Anchor onClick={handleClick}>
                    {linkConfig}
                </Anchor>
            </Drawer> */}
            <div className="anchor-container" ref={domRef}>
                <div className="anchor">
                    <Anchor
                        // onClick={handleClick}
                        getContainer={() =>
                            (getContainer || document.querySelector('.layout-content'))
                        }
                    >
                        {linkConfig}
                    </Anchor>
                </div>
            </div>
            <Component />
        </div>
    );
};

export default commonAnchor;
